import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import store from './store/index'
/* 
yarn add redux  react-redux
  redux 是一个数据管理模型  跟 react没关系
  store中的getState可以让我们获取redux中的数据源
  dispatch 是用来通过提交action的方式来修改数据
  subscribe(回调函数) 这些回调函数会在数据更新之后自动执行
*/
console.log(store)

function Child() {
  let [state, setState] = useState(0);
  useEffect(() => {
    console.log(666)
    let clear = store.subscribe(() => {
      setState(state + 1)
    })
    return () => {
      clear()
      console.log('上一个child销毁了')
    }
  })
  // store.subscribe(() => {
  //   setState(state + 1)
  //   return () => {
  //     console.log('上一个child销毁了')
  //   }
  // })
  return <>
    <h2>子数据{store.getState().age}</h2>
    <button onClick={() => { store.dispatch({ type: 'addAge', num: 1 }) }}>+age</button>
  </>
}


class App extends React.Component {
  add = () => {
    store.dispatch({ type: 'add', n: 100 })
    console.log(store.getState())
  }
  componentDidMount() {
    // store.subscrib 返回值是一个回调函数 这个回调函数执行的时候 会把这次增加的时间移除
    this.clear = store.subscribe(() => {
      this.setState({})
    })
  }
  componentWillUnmount() {
    this.clear()
  }
  render() {
    return <div className=''>
      <h1>{store.getState().count}</h1>
      <h1>{store.getState().name}</h1>
      <h1>{store.getState().age}</h1>
      <button onClick={this.add}>+</button>
      <button onClick={() => store.dispatch({ type: 'minus', m: 50 })}>-</button>
      {/* <Child /> */}
    </div>;
  }
}

ReactDOM.render(<>
  <App />
  <Child />
</>, document.getElementById('root'))